<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长表格</title>
    <style type="text/css">
        table {
            width: 300px;
            margin: 0 auto;
            border-collapse: collapse;
        }
        td, th{
            border: 1px solid black;
        }

        /*隔行变色*/
        tr:nth-child(even) {
            background-color: green;
        }

        /*鼠标移入变色*/
        tr:hover {
            background-color: #cc0000;
        }
    </style>
</head>
<body>
    <!--
        有一些情况下表格是非常的长的，比如银行的流水单等。
        这个时候就需要将表格分为三个部分，表头表格的主体，表格底部等。
        在HTML中为我们提供了三个标签：
        thend 表头 中的内容，永远都会显示在表格的头部
        tbody 表体 中的内容，永远都会显示在表格的中间
        tfoot 表格底部 中的内容，永远都会显示在表格的地步

        这三个标签的作用，就是来区分表格的不同的部分，他们都是table的子标签，都需要直接写在table中，tr需要写在这些标签当中.

        如果表格没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素，通过table > tr 无法选中行
        需要通过tbody > tr  来选中行
    -->

    <!--
        表格布局：
        以前的表格更多的情况实际上是用来对页面进行布局的，但是这种方式早就被css淘汰了，所以此处不做介绍
    -->

    <table>
        <thead>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>金额</td>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>1000</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>100</td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>100</td>
            </tr>
        </tbody>
    </table>
</body>
</html>